 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">客服资金流水</div>
      </div>
      <div class="content-con">
        <Form :model="form">
          <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
            <Col span="4">
              <FormItem prop="timeData">
                <i-select size="large" v-model="form.timeData" clearable  style="color: #000;" placeholder="时间段">
                  <Option value="today">当日</Option>
                  <Option value="yesterday">昨日</Option>
                  <Option value="week">本周</Option>
                  <Option value="month">本月</Option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <Date-picker v-model="form.starttime" size="large" clearable style="width: 100%;" type="datetime" placeholder="开始时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <Date-picker v-model="form.endtime" size="large" clearable  style="width: 100%;" type="datetime" placeholder="结束时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="uid">
                <i-input v-model="form.uid" size="large" clearable  placeholder="客服ID"></i-input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" type="flex" justify="end" class="code-row-bg">
           <!-- <Col span="4">
              <FormItem prop="agent_uid">
                <i-input v-model="form.agent_uid" size="large"  placeholder="代理商ID"></i-input>
              </FormItem>
            </Col> -->
            <Col span="4">
              <FormItem prop=" bill_no">
                <i-input v-model="form.bill_no" size="large" clearable  placeholder="流水单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="pm">
                <i-select v-model="form.pm" size="large" clearable  style="color: #000;" placeholder="资金变动方向">
                  <Option value="1">加款</Option>
                  <Option value="0">减款</Option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="category">
                <i-select v-model="form.category" clearable size="large" style="color: #000;" placeholder="业务类型">
                <!--  <Option value="recharge_money">支付</Option> -->
                <!--  <Option value="1">提现</Option> -->
                  <Option value="changes_money">调账/充值</Option>
                 <!-- <Option value="3">充值</Option>
                  <Option value="4">差错处理</Option> -->
                  <Option value="paid_money">代付/处理</Option>

                </i-select>
              </FormItem>
            </Col>
          </Row>
          <FormItem class="btn-search">
            <i-button size="large" class="btn-green" @click="search">搜索</i-button>
          </FormItem>
        </Form>
        <div class="capital-money">
          <div class="capital-money-item">
            总笔数：<span class="list1">{{dataCount}}</span>
            变动总额：<span class="list2">{{totalSum}}</span>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData">
              <template slot-scope="{ row }" slot="submoney">
                <span :class="row.balance | balancemoney(row.number) > 0 ? 'green': 'red'">
                  {{row.balance | balancemoney(row.number,row.pm)}}
                </span>
              </template>
              <template slot-scope="{ row }" slot="number">
                <Tag :color="row.pm=='增加'?'green':'red'">{{row.pm | changesStr}}{{row.number}}</Tag>

              </template>
            </i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <!-- <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button> -->
          </div>
        </div>
      </div>
   </Card>

 </template>
<script>

import { billlist } from '@/api/capital'
export default {
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      form: {
        timeData: '',
        starttime: '',
        endtime: '',
        uid: '',
        agent_uid: '',
        bill_no: '',
        pm: '',
        category: '',
        user_type: 1
      },
      value: '',
	    pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center',
        //   fixed: 'left'
        // },
        {
          title: '流水单号',
          key: 'bill_no',
          width: 180
        },
        {
          title: '客服ID/昵称',
          key: 'uid',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('div', params.row.uid),
              h('Tag', {
                props: {
                  color: 'cyan'
                }
              }, params.row.nickname)
            ])
          }
        },
        {
          title: '变更前金额(元)',
          slot: 'submoney',
          width: 120
        },
        {
          title: '变更金额(元)',
          slot: 'number',
          width: 120
        },

        {
          title: '变更后余额(元)',
          key: 'balance',
          width: 120
        },
        {
          title: '业务类型',
          key: 'billType',
          width: 140

        },

        // {
        //   title: '手续费(元)',
        //   key: 'poundage',
        //   width: 120
        // },
        {
          title: '时间',
          key: 'add_time',
          width: 260
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minwidth: 160,
          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'cap-view',
                        params: { row: params.row }
                      })
                    }
                  }
                },
                '查看'
              )
            ])
          }
        }
      ],
      foodData: [],
      totalSum: 0
    }
  },
  methods: {
    getList () {
      this.form.pageCurrent = this.pageCurrent
      this.form.pageSize = this.pageSize
      billlist(this.form)
        .then(res => {
          this.foodData = res.data.data
          this.dataCount = res.data.count
          this.totalSum = res.data.changesSum
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    search () {
      this.getList()
    },

    // 点击切换页面
    changepage (index) {
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      this.pageSize = index
      this.getList()
    }

  },
  created () {
    this.getList()
  }
}
</script>
 <style lang="less">
   .green{
     color: #5FB878;
   }
   .red{
     color: red;
   }
 </style>
